<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title></title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-select.css" rel="stylesheet">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
<link href="../css/bootstrap-table.css" rel="stylesheet">
<link href="../css/bootstrap-table-fixed-columns.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link href="../css/JyyCommon.css" rel="stylesheet">
<link href="../css/JyyTable.css" rel="stylesheet">
<link href="../css/JyyTree.css" rel="stylesheet">
<link href="../css/JyyMsgBox.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-select.js"></script>
<script type="text/javascript" src="../js/bootstrap-table.js"></script>
<script type="text/javascript" src="../js/bootstrap-table-fixed-columns.js"></script>
<script type="text/javascript" src="../js/jyy_modal.js"></script>
<script type="text/javascript" src="../js/JyyCommon.js"></script>
<script type="text/javascript" src="../js/JyyTable.js"></script>
<script type="text/javascript" src="../js/JyyTree.js"></script>
<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
<script type="text/javascript" src="../js/JyyLoading.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../../utils/CommonUtil.js"></script>

<script type="text/javascript">
	var tree = null;
	var projectId =  getQueryString("projectId")||'88888888888';
	var sectionSel =  "";
	var yearSel =  "";
	var type = "";
	var max = "";
	var min = "";
	$(function(){
		$("#help").tooltip({
			placement: 'bottom'
		});
		getSelectDatas();
		selectData();
	});
	function selectData(){
		$("#selBtn").attr("disabled", true);
		sectionSel =  $('#sectionSel').val();
		yearSel =  $('#yearSel').val();
		type = $("input[name='type']:checked").val();
		max = type=="fixed"?$('#maxValue').val():$('#maxRate').val();
		min = type=="fixed"?$('#minValue').val():$('#minRate').val();
		if(JyyCommon.isEmpty(sectionSel)){
			JyyMsgBox.alert({ title:"警告", message:"[断面名称]不可为空",type:"warning"}).on(function (e) {});
			return false;
		}
		if(JyyCommon.isEmpty(yearSel)){
			JyyMsgBox.alert({ title:"警告", message:"[年份]不可为空",type:"warning"}).on(function (e) {});
			return false;
		}
		JyyModelLoading.start("sectionOutputDiv");
		$.when(getEcahtData("sectionOutputEchatData",sectionSel, yearSel,type,max,min)).done(function(echatData){
			createEchat(echatData.respData, 1, type);
			JyyModelLoading.end("sectionOutputDiv");
		});
		JyyModelLoading.start("sectionCrossDiv");
		$.when(getEcahtData("sectionCrossTableData",sectionSel, yearSel,type,max,min)).done(function(echatData){
			createTable(echatData.respData, 1);
			JyyModelLoading.end("sectionCrossDiv");
			$("#selBtn").attr("disabled", false);
		});
	}

	function createEchat(echartData, code,type) {
		var id = "";
		var option = {};
		var xAxisName = "时间";
		var seriesData = [];
		var yAxisName = "MW";
		var fLine = 2000;
		var sLine = 500;
		if(code == 1) {
			id = "sectionOutputEchart";
		}
		var mkLineData =[];
		//var seDaraList =[];
		for(var i = 0;i < echartData.seriesData.length; i++) {
			if(type == "fixed") { // 固定值
				fLine = $("#maxValue").val();
				sLine = $("#minValue").val();
				if(fLine!=''){
					mkLineData.push({
			            symbol: 'none',
			            yAxis: fLine,
			            lineStyle:{
				    		color : "#FF0000"
				    	}
			    	});
				}
				if(sLine!=''){
					mkLineData.push({
			            symbol: 'none',
			            yAxis: sLine,
			            lineStyle:{
				    		color : "#FF0000"
				    	}
			    	});
				}
			} else if(type == "perce") { // 百分比
				fLine = echartData.seriesData[i].maxRes;
				sLine = echartData.seriesData[i].minRes;
				if(fLine!='max'){
					mkLineData.push({
			            symbol: 'none',
			            yAxis: fLine,
			            lineStyle:{
				    		color : "#FF0000"
				    	}
			    	});
				}
				if(sLine!='min'){
					mkLineData.push({
			            symbol: 'none',
			            yAxis: sLine,
			            lineStyle:{
				    		color : "#FF0000"
				    	}
			    	});
				}
			}
			/* mkLineData.push({
	            symbol: 'none',
	            yAxis: echartData.seriesData[i].transuplmt,
	            lineStyle:{
		    		color : "#666666"
		    	}
	    	}); */
			//seDaraList = echartData.seriesData[i].series;
			//seDaraList.push(echartData.seriesData[i].transuplmt);
			seriesData.push({
				type: 'line',
			    data: echartData.seriesData[i].series,
			    markLine: {
			    	data: mkLineData,
			    }
			});
		}
		//var maxVal = Math.max.apply(null,seDaraList);
		option = {
		  	tooltip: {
		    	trigger: 'axis',
		    	position: function(point, params, dom, rect, size) {
		             //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
		             var x = point[0]; //
		             var y = point[1];
		             var viewWidth = size.viewSize[0];
		             var viewHeight = size.viewSize[1];
		             var boxWidth = size.contentSize[0];
		             var boxHeight = size.contentSize[1];
		             var posX = 0; //x坐标位置
		             var posY = 0; //y坐标位置
		             if (x < boxWidth) { //左边放不开
		                 posX = 5;
		             } else { //左边放的下
		                 posX = x - boxWidth;
		             }
		             if (y < boxHeight) { //上边放不开
		                 posY = 5;
		             } else { //上边放得下
		                 posY = y - boxHeight;
		             }
		             return [posX, posY];
		         }
		  	},
			toolbox: {
				show: true,
				right: 30,
			    itemSize: 20,
				itemGap: 12,
		        feature: {
		        	myTool: {
		        		show: true,
		        		title: "导出为Excel",
		        		icon: 'image://../images/excel.png',
		        		onclick: (o) => {
							var option = o.option;
							var dataSource = [];
							var dataType = "\uFEFF"; //解决乱码问题
							dataType += option.xAxis[0].name+",";  //添加表格的头
							if(option.series.length > 0) {
								for(var i = 0;i < option.series.length;i++) {
									dataType += option.series[i].name+","
								}
								dataType = dataType.substr(0, dataType.length-1)
							}
							dataType += '\n'; // 以上是导出的Excel文件头部

							for(var i = 0;i < option.xAxis[0].data.length;i++) {
								var arr = [];
								for(var j = 0;j < option.series.length+1;j++) {
									if(j == 0) {
										arr.push(" "+option.xAxis[0].data[i]);
									} else {
										arr.push(option.series[j-1].data[i]);
									}
								}
								dataSource.push(arr);
							}
							// 从dataSource中取出数据存入数据源（dataType）
							dataSource.map(item => dataType += `${item.join(',')}\n`); 
							// 使用Blob，获得二进制实例
							const csvData = new Blob([dataType], {
							    type: 'text/csv'
							});
							// 创建a标签
							const _a = document.createElement('a');
							_a.href = URL.createObjectURL(csvData);
							_a.target = '_blank';
							_a.download = `断面出力情况.csv`;
							document.body.appendChild(_a);
							_a.click();
							document.body.removeChild(_a);
	                   	},
		        	},
		        	saveAsImage: {name:"断面出力情况",icon:"image://../images/downpic.png"}
		        }
		    },
		  	grid: {
		    	left: '3%',
		    	right: '5%',
		    	bottom: '12%',
		    	containLabel: true
		  	},
		  	xAxis: [{
		    	type: 'category',
		    	name: xAxisName,
		      	data: echartData.xAxisData
		    }],
		  	yAxis: [{
		      	type: 'value',
		      	name: yAxisName,
		      	//max :maxVal
			}],
			dataZoom: [{
		    	type: 'inside',
		    	start: 0,
		    	end: 10
			},{
			    start: 0,
			    end: 10
		    }],
			legend: {},
		  	series: seriesData
		};
		var chartDom = document.getElementById(id);
		var myChart = echarts.init(chartDom);
		myChart.clear();
		myChart.setOption(option);
		window.addEventListener("resize", () => {
			if(myChart){
				myChart.resize()
			}
		})
	}
	// 表格
	function createTable(tableData, code) {
		var id = "";
		var table = {};
		if(code == 1) {
			id = "sectionCrossTable";
			table = {
		    	cache: false,
		        height: 507,
		        theadClasses: "bg-primary",
		    	columns: tableData.columnsList,
		    	data: tableData.dataList,
		    };
		}
		$('#'+id).bootstrapTable('destroy').bootstrapTable(table);
	}
	
	//查询
	function select(){
		selectData();
	}
	// 导出数据
	function exportData() {
		const url = localStorage.getItem('baseURL')
		var form = $(`<form id="download" action="${url}pageExcel/downloadExcel/10000" style="display:none" method="post">`);
		var input = $('<input type="hidden" name="projectid">');
		input.attr("value", projectId);
		form.append(input);
		var input1 = $('<input type="hidden" name="type">');
		input1.attr("value", type);
		form.append(input1);
		var input2 = $('<input type="hidden" name="sectionSel">');
		input2.attr("value", sectionSel);
		form.append(input2);
		var input3 = $('<input type="hidden" name="yearSel">');
		input3.attr("value", yearSel);
		form.append(input3);
		var input4 = $('<input type="hidden" name="max">');
		input4.attr("value", max);
		form.append(input4);
		var input5 = $('<input type="hidden" name="min">');
		input5.attr("value", min);
		form.append(input5);
		$("body").append(form);
		formSubmit(document.querySelector('#download'), '断面越线清单');
		form.submit();
		form.remove();
	}

	function getQueryString (name){
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		return r ? unescape(r[2]) : null;
	}
	
	function toFixed(number,len){
	  //需要n位小数就乘以n倍
	  const ceil = Math.pow(10,len);
	  //加0.5是为了四舍五入
	  const intNum = number*ceil+0.5;
	  //再除以n倍
	  const result = parseInt(intNum,10)/ceil;
	  return result
	}

	function getSelectDatas(){
		$.ajax({
			url: "Sample/getSectionCrossOption",
			type:'POST',
			async:false,
			dataType: "json",
			data:JSON.stringify({ projectId : projectId }),
			contentType:"application/json",
	        success:function(data){
	        	var content = '';
				$.each(data.respData.sectionname,function(i,n){
					content += "<option value='" + n + "'>"+ n +"</option>";
				});
				$("#sectionSel").html(content);

				var content1 = '';
				$.each(data.respData.iyear,function(i,n){
					content1 += "<option value='" + n + "'>"+ n +"</option>";
				});
				$("#yearSel").html(content1);
				$('.selectpicker').selectpicker('refresh');
	        }
		});
	}

	function getEcahtData(method,sectionSel, yearSel,type,max,min){
		var res = $.ajax({
			url: "Sample/" + method,
			type:'POST',
			cache:false,
			dataType: "json",
			data:JSON.stringify({ projectId : projectId,sectionSel:sectionSel, yearSel:yearSel,type:type,max:max,min:min }),
			contentType:"application/json",
            success:function(data){
				return data;
            }
		});
		return res;
	}

	function invoke(url, args, callback){
		var r, op = {
				url: '../g/service/Sample/' + url,
				type:'POST',
				cache:false,
				async:true,
				dataType:'json',
				data:args ? JSON.stringify(args) : null,
				contentType:"application/json"
			};
		if(typeof callback == 'function'){
			op.success = function(data){
				if(data.error)return alert(data.error);
				callback(data);
			}
		} else {
			op.async = false;
			op.success = function(data){
				r = data
			};
		}
		$.ajax(op);
		if(r)if(r.error){
			alert(r.error);
			return null;
		}
		return r;
	};
</script>
<style type="text/css">
	body, html{
		width: 100%;
		height: 100%;
	}
	.selBtn {
		float:left;
		margin-left:20px;
		height:30px;
		width:60px;
		background-color:#1890FF;
		border-radius:5px;
		border: 0px;
		color:white;
	}
	.selBtn:hover {
		background-color: #00BFFF;
	}
	.shadow {
		box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
		border-radius: 0.25rem!important;
		margin-left: 20px;
		margin-bottom: 20px;
	}
	label {
		font-weight: normal;
	}
    #sectionCrossDiv .fixed-table-border {
    	display: none;
    }
	thead tr:first-child {
		background-color: #4090E7;
        position:sticky;
        padding-top:10px;
        top: 0px;
    }
</style>
</head>
<body>
<div style="overflow-y: auto;width: 100%;height: 100%;">
	<div style="height: 90px;width: calc(100% - 20px);">
		<div class="col-md-12" style="padding-left: 5px;padding-right: 5px;margin-top: 10px;margin-left: 20px;">
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 55px;font-weight: normal;">断面名称</label>
			<select class="form-control" id="sectionSel" style="float: left;margin-top: -3px;padding: 5px;width: 120px;font-weight: normal;"></select>
			
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 30px;margin-left: 5px;font-weight: normal;">年份</label>
			<select class="form-control" id="yearSel" style="float: left;margin-top: -3px;padding: 5px;width: 70px;font-weight: normal;"></select>

			  <input type="radio" class="form-check-input" style="float: left;margin-left: 5px;margin-top: 9px;" id="radio1" name="type" value="fixed" checked>
			  <label class="form-check-label" for="radio1" style="float: left;margin-left: 2px;margin-top: 7px;">按固定值校验越线</label>
			  
			  <label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 34px;padding: 0px;width: 36px;font-weight: normal;">上限：</label>
			  <input id="maxValue" class="form-control" type="number" style="float: left;margin-top: -3px;padding: 5px;width: 150px;font-weight: normal;">
			  <label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 5px;padding: 0px;width: 26px;font-weight: normal;">MW</label>
			  
			  <label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 10px;padding: 0px;width: 36px;font-weight: normal;">下限：</label>
			  <input id="minValue" class="form-control" type="number" style="float: left;margin-top: -3px;padding: 5px;width: 150px;font-weight: normal;">
			  <label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 5px;padding: 0px;width: 26px;font-weight: normal;">MW</label>
			  
			  <img id="help" src="../images/help.png" title="筛选规则：大于上限值(上限百分比)或小于下限值(下限百分比)"
			  	style="width: 32px;height: 32px;float: left;margin-left: 20px;cursor: pointer;">
			  
		</div>
		<div class="col-md-12" style="padding-left: 5px;padding-right: 5px;margin-top: 10px;margin-left: 20px;">
			 
			  
			  <input type="radio" class="form-check-input" style="float: left;margin-left: 285px;margin-top: 9px;" id="radio2" name="type" value="perce">
			  <label class="form-check-label" for="radio2" style="float: left;margin-left: 2px;margin-top: 7px;">按容量百分比校验越线</label>
			  
			  <label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 10px;padding: 0px;width: 36px;font-weight: normal;">上限：</label>
			  <input id="maxRate" class="form-control" type="number" style="float: left;margin-top: -3px;padding: 5px;width: 150px;font-weight: normal;">
			  <label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 5px;padding: 0px;width: 15px;font-weight: normal;">%</label>
			  
			  <label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 22px;padding: 0px;width: 36px;font-weight: normal;">下限：</label>
			  <input id="minRate" class="form-control" type="number" style="float: left;margin-top: -3px;padding: 5px;width: 150px;font-weight: normal;">
			  <label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 5px;padding: 0px;width: 15px;font-weight: normal;">%</label>

			<button id="selBtn" class="selBtn" style="float: right;margin-right: 24px;" onclick=select()>查询</button>
		</div>
	</div>
	<div id="sectionOutputDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">断面出力情况</span>
		</p>
		<div id="sectionOutputEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
	</div>
	<div id="sectionCrossDiv" class="shadow" style="width: calc(100% - 40px);height: 550px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">断面越线清单</span>
		</p>
		<p id="buttonP"><button style="margin: 0 15px 10px 0;float: right;" class="selBtn" onclick=exportData()>导出</button></p>
		<div style="width: calc(100% - 80px);margin-left: 40px;">
			<table id="sectionCrossTable"></table>
		</div>
	</div>
</div>
</body>
</html>